<template>
  <div class="common-container">
    <div class="div_box">
      <el-row class="icon-plus">
        <el-button type="theme" icon="el-icon-plus" size="small" @click="addClick">新增</el-button>
        <el-button type="info" icon="el-icon-sort" size="small" @click="toggleClick">展开/折叠</el-button>
      </el-row>
    </div>
    <!-- 头部增删改按钮结束 -->
    <el-table v-if="refreshTable" :default-expand-all="isSxpandAll" height="calc(100% - 40px)"
      :header-cell-style="headerStyle" :data="tableData" style="width: 100%" row-key="id" size="medium"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <!-- <el-table-column align="left" prop="name" label="菜单名称" width="240">
        <template slot-scope="scope">
          <span class="distance" v-if="scope.row.parentId == 0 && !scope.row.children.length">{{scope.row.name}}</span>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column> -->
       <el-table-column align="center" prop="name" label="菜单名称" width="260" >
        </el-table-column>
      <el-table-column align="center" prop="type" label="类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 0" style="color: #f78989">目录</span>
          <span v-else-if="scope.row.type === 1" style="color: #85ce61">菜单</span>
          <span v-else-if="scope.row.type === 2" style="color: #66b1ff">按钮</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="排序" width="100">
      </el-table-column>
      <el-table-column align="center" prop="icon" label="图标" width="100">
        <template slot-scope="scope">
          <span :class="scope.row.icon"></span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="url" label="URL" width="160">
      </el-table-column>
      <el-table-column align="center" prop="value" label="标识" width="290">
      </el-table-column>
      <el-table-column align="center" prop="description" label="描述">
        <template slot-scope="scope">
          <span class="row-show">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="management" label="操作" width="150" class="celltable">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <i @click="deleteClick(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <AddPermission ref="refAddPermission" :parentList="parentList"></AddPermission>
    <!-- 修改弹框 -->
    <EditPermission ref="refEditPermission" :parentList="parentList" :editRowInfo="editRowInfo"
            :clearEditRowInfo="clearEditRowInfo"></EditPermission>
  </div>
</template>

<script>
import { getPermissionAll ,getPermissionTreeAll,delPermission} from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import AddPermission from "./components/AddPermission.vue"; //新增组件
import EditPermission from "./components/EditPermission.vue"; //修改组件
import { transTree } from "@/utils/trans-tree";//列表返回全部数据上下级数据

export default {
  name: "permission",
  components: {
    AddPermission,
    EditPermission
  },
  data() {
    return {
      show: false, //表头设置默认隐藏
      refreshTable: true, //重新渲染表格
      isSxpandAll: false, //是否展开全部
      tableData: [], //树形控件数据
      parentList: [], //父树形列表
      editRowInfo: {}, //修改那行的数据
    };
  },
  mixins: [tableStyleMixin],
  mounted() {},
  methods: {
    // 获取所有权限 列表
    async PermissionAll() {
      const res = await getPermissionAll();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = transTree(res.data.data);
    },
    //  获取权限树形列表
    async PermissionTreeList() {
      const res = await getPermissionTreeAll();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.parentList = res.data.data;
    },
    // 点击新增权限按钮
    addClick() {
      this.PermissionTreeList();
      this.$refs.refAddPermission.dialogVisible = true;
    },
    // 点击修改权限按钮
    editClick(row) {
      this.PermissionTreeList();
      this.editRowInfo = JSON.parse(JSON.stringify(row)); //深拷贝当前行数据，解除修改数据与列表数据双向绑定
      this.$refs.refEditPermission.dialogVisibleUpdate = true;
    },
    // 子组件请求清除
    clearEditRowInfo() {
      this.editRowInfo = {};
    },
    // 点击行删除权限操作   删除一条
    async deleteClick(id) {
      const result = await this.$confirm(
        "此操作将永久删除该权限, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await delPermission(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除权限成功");
      this.PermissionAll();
      this.PermissionTreeList(); //更新权限树形列表
    },
    // 展开/折叠
    toggleClick() {
      this.refreshTable = false;
      this.isSxpandAll = !this.isSxpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  },
  created() {
    this.PermissionAll();
  },
};
</script>

<style scoped lang="less">
.common-container {
  background: @primaryHeaderBgcolor;
  box-sizing: border-box;
  padding: 20px 0;
}

.distance {
  width: 100%;
  display: block;
  text-align: center;
}

 /* 增删改按钮样式 */
.icon-plus {
  margin-bottom: 15px;
  height: 28px;
  padding-left: 20px;
}

// 项目栏

// ::v-deep .el-table__expand-icon {
//   margin-left: 60px;
// }

::v-deep .el-table__placeholder {
  margin-left: 60px;
}

::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}


::v-deep .el-table tr {
  background-color: @primaryHeaderBgcolor;
  color: @primaryThemeTxtColor;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid @primaryBorderColor;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: @primaryBorderColor;
  z-index: 1;
}

::v-deep .el-table tbody tr:hover > td {
  background: @primaryMenuItem !important;
}

// 表格按钮
.tableBtnIcon {
  font-size: 18px;
  cursor: pointer;
}

// 设置操作两个按钮
::v-deep .el-table__row>td:last-of-type .cell {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-button{
  background: #7367f0;
    color: #fff;
    border: none;
}
</style>